Angular初探（二）

---

今天主要想讲的是$scope,$rootScope,controller的继承等问题。相信许多像我一样的初学者在使用AngularJS开发前端的时候都会碰到一个问题，就是有些页面的控制逻辑会被一些其他页面用到，甚至是变量，举个例子，许多表单提交页面都由警告框来提示用户的输入错误，检查用户输入的函数以及控制警告框是否显示的逻辑根据编程的原则应该被复用。虽然这个例子举的不太当，但是我像表达的是一些涉及到页面元素的复用，将它们写作服务或者工厂显然是不合适的，这个时候我就十分怀念起面向对象里的继承了。但Angular的依赖注入是不允许也不应该允许把一个控制器注入到另一个控制器的依赖里的。控制器的继承并非与对象一样，是基于作用域继承的。

html<div ng-controller="Ctr1">
    <p>{{name}}</p>
    <div ng-controller="Ctr2">
         <p>{{name}}</p>
    </div>
</div>

上面这一段简短的代码出现了两个控制器，现在让我们亮出angular的代码吧！

javascriptangular.module('myApp'[]).controller('Ctr1',function($scope){
    $scope.name="hello";
}).controller('Ctr2',function($scope,$timeout){
    function lll(){
   var timer=$timeout(function({
       $scope.name="jjj";},2000);
      });
    lll();
});

显然开始两端文字一样，后来下面的文字发生了变化，当子元素找不到相应变量时，会转向它的父元素，一直找不到，最终到达$rootScope,$rootScope属于module,一个module只有一个$rootScope，所有的$scope均由$rootScope生成。子元素对应的控制器修改变量并不能影响父元素。但$rootScope有点类似于Ｃ里面的全局变量，为属于同一个module的控制器提供了通过访问$rootScope来进行通信的一种途径。举个例子，一个有多个tab页的页面，对每个tab-content单独设置一个警告框实在太过于繁琐，但在父元素里放置警告框如何通过tab-content对应的controller改变框的状态呢？将警告框与$rootScope的变量联系起来，在子元素的控制器里修改$rootScope的对应变量即可。